<template>
  <view
    class="v-icon-container"
    :style="style"
    @click="$emit('click')"
  >
    <image
      class="v-icon"
      :src="parsedSrc"
      :mode="mode"
    />
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue';

const props = withDefaults(
  defineProps<{
    active?: boolean;
    src: string;
    activeSrc?: string;
    size?: string;
    customStyle?: CSSProperties;
    mode?:
      | 'scaleToFill'
      | 'aspectFit'
      | 'aspectFill'
      | 'widthFix'
      | 'heightFix';
  }>(),
  {
    active: false,
    src: '',
    activeSrc: '',
    mode: 'widthFix',
    size: '',
    customStyle: undefined
  }
);

defineEmits<{
  click: [];
}>();

const src = toRef(props, 'src');
const activeSrc = toRef(props, 'activeSrc');
const active = toRef(props, 'active');
const size = toRef(props, 'size');
const parsedSrc = computed(() => {
  if (active.value) {
    return activeSrc.value.replace(/^@\//, '/');
  } else if (src.value) {
    return src.value.replace(/^@\//, '/');
  } else {
    return undefined;
  }
});

const customStyle = toRef(props, 'customStyle');

const style = computed(() => {
  const styleObj: CSSProperties = {
    display: 'block',
    width: '34rpx'
  };
  if (size.value) {
    styleObj.width = size.value;
    styleObj.height = size.value;
  }
  if (customStyle.value) {
    Object.assign(styleObj, customStyle.value);
  }
  return styleObj;
});
</script>

<style lang="scss" scoped>
.v-icon {
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  display: block;
}
</style>
